<template>
    <div>
        <div>
            <div class="search-con search-con-top">
                订单编号：
                <Input v-model="searchData.order_sn" style="width: 150px"></Input>
                城市：
                <Select v-model="searchData.city_id" filterable style="width: 150px" @on-change="cityChange">
                    <Option :value="val.city_id" v-for="val in cityArr" :key="val.id">{{ val.name }}</Option>
                </Select>
                驾校：
                <Select v-model="searchData.school_id" filterable style="width: 150px">
                    <Option :value="val.id" v-for="val in schoolList" :key="val.id">{{ val.name }}</Option>
                </Select>
                用户电话：
                <Input v-model="searchData.mobile" style="width: 150px"></Input>
                状态：
                <Select v-model="searchData.pay_status" style="width: 150px">
                    <Option :value="1">待支付</Option>
                    <Option :value="2">已支付</Option>
                    <Option :value="3">已完成</Option>
                    <Option :value="4">已取消</Option>
                    <Option :value="-1">支付失败</Option>
                </Select>
                下单时间：
                <Date-picker type="daterange" placeholder="开始日期" v-model="searchData.create_time"></Date-picker>
                <Button @click="search" type="primary" style="margin-left: 10px;">搜索</Button>
                <Button @click="reset" type="success" style="margin-left: 10px;">重置</Button>
                <Button @click="add(false)" type="info" style="margin-left: 10px;">添加</Button>
            </div>
            <br>
            <Table :columns="columns" :data="list" border stripe size="small" :row-class-name="rowClassName">
                <template slot-scope="{ row , index}" slot="userSlot">
                    <div style="display: flex;flex-direction: column;align-items: flex-start;">
                        <div><span style="font-weight: bold;">姓名：</span>{{ row.username }}</div>
                        <div><span style="font-weight: bold;">手机号：</span>{{ row.mobile }}</div>
                    </div>
                </template>
                <template slot-scope="{ row , index}" slot="coachSlot">
                    <div><span style="font-weight: bold;">姓名：</span>{{ row.coach_name }}</div>
                    <div><span style="font-weight: bold;">手机号：</span>{{ row.coach_mobile }}</div>
                </template>
                <template slot-scope="{ row , index}" slot="courseSlot">
                    <div v-if="row.source_id > 1 && row.status != 1" style="background-color: yellow;">
                        <div><span style="font-weight: bold;">来源：</span> {{ row.source_title }}</div>
                        <div><span style="font-weight: bold;">驾校：</span>{{ row.school_name }}</div>
                        <div><span style="font-weight: bold;">课程：</span>{{ row.course_name }}</div>
                    </div>
                    <div v-else>
                        <div><span style="font-weight: bold;">来源：</span> {{ row.source_title }}</div>
                        <div><span style="font-weight: bold;">驾校：</span>{{ row.school_name }}</div>
                        <div><span style="font-weight: bold;">课程：</span>{{ row.course_name }}</div>
                    </div>
                </template>
                <template slot-scope="{ row , index}" slot="memberSlot">
                    <Button @click="add(row)" type="info" size="small" style="margin-left: 5px;">编辑</Button>
                    <Button @click="uploadCode(row.id)" type="primary" size="small" style="margin-left: 5px;"
                        v-if="row.status == 3">上传券码</Button>
                    <Button @click="complete(row)" type="primary" size="small" style="margin-left: 5px;"
                        v-if="row.status == 6">完成</Button>
                    <Button @click="del(row.id)" type="error" size="small" style="margin-left: 5px;">删除</Button>
                    <Button @click="record(row.id)" type="primary" size="small" style="margin-left: 5px;">跟踪记录</Button>
                </template>
            </Table>

            <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize" :current="searchData.page">
            </Paginate>

            <!-- 添加订单 -->
            <Modal title="学车订单" :width="40" v-model="showAdd" :mask-closable="false">
                <Form ref="formValidate" :model="orderInfo" :label-width="60">
                    <FormItem label="来源">
                        <radioGroup v-model="orderInfo.source_id">
                            <Radio v-for="item in sourceArr" :label="item.id" :key="item.id" border>{{ item.title }}</Radio>
                        </radioGroup>
                    </FormItem>
                    <FormItem label="城市">
                        <Select v-model="orderInfo.city_id" filterable @on-change="cityChange">
                            <Option :value="val.city_id" v-for="val in cityArr" :key="val.id">{{ val.name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="驾校">
                        <Select v-model="orderInfo.school_id" filterable>
                            <Option :value="val.id" v-for="val in schoolList" :key="val.id">{{ val.name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="类型">
                        <Select v-model="orderInfo.type" filterable>
                            <Option value="小车">小车</Option>
                            <Option value="大车">大车</Option>
                            <Option value="摩托车">摩托车</Option>
                            <Option value="货车">货车</Option>
                            <Option value="挂车">挂车</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="课程">
                        <Input v-model="orderInfo.course_name" placeholder=""></Input>
                    </FormItem>
                    <FormItem label="姓名">
                        <Input v-model="orderInfo.username" placeholder=""></Input>
                    </FormItem>
                    <FormItem label="手机号">
                        <Input v-model="orderInfo.mobile" placeholder=""></Input>
                    </FormItem>
                    <FormItem label="备注">
                        <Input v-model="orderInfo.remark" type="textarea" :rows="4"></Input>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="primary" size="large" long @click="addSubmit">确定</Button>
                </div>
            </Modal>
            <!-- 指派教练 -->
            <Modal title="指派教练" width="40" v-model="showAssign" @on-ok="submit">
                <Form ref="formValidate" :model="orderInfo" :label-width="70">
                    <FormItem label="教练">
                        <Select v-model="orderInfo.coach_id" filterable>
                            <Option :value="val.id" v-for="val in coachList" :key="val.id">{{ val.school_name }}-{{
                                val.username }}-{{ val.mobile }}</Option>
                        </Select>
                    </FormItem>
                </Form>
            </Modal>
            <!-- 取消订单 -->
            <Modal title="取消订单" width="40" v-model="cancelOrderModal" @on-ok="cancelOrderSubmit">
                <Form ref="formValidate" :model="cancelOrder" :label-width="70">
                    <FormItem label="取消原因">
                        <Input v-model="cancelOrder.reason" placeholder="请输入取消原因"></Input>
                    </FormItem>
                </Form>
            </Modal>
            <!-- 完成订单 -->
            <Modal title="完成订单" width="40" v-model="completeOrderModal" @on-ok="completeOrderSubmit">
                <Form ref="formValidate" :model="completeOrder" :label-width="70">
                    <FormItem label="教练工资">
                        <Input v-model="completeOrder.amount"></Input>
                    </FormItem>
                </Form>
            </Modal>
            <!-- 上传券码-->
            <Modal title="券码" width="40" v-model="showCodeModal" @on-ok="uploadCodeOk">
                <Form ref="formValidate" :model="couponInfo" :label-width="70">
                    <FormItem label="填写券码">
                        <Input v-model="couponInfo.coupon_code" type="text"></Input>
                    </FormItem>
                    <FormItem label="图片">
                        <MyUpload :maxNumber="1" @getImages="getImg" :defaultImags="[couponInfo.coupon_code_img]">
                        </MyUpload>
                    </FormItem>
                </Form>
            </Modal>

            <!-- 跟踪记录 -->
            <Modal title="跟踪记录" width="60" v-model="infoModal">
                跟踪记录：
                <Input v-model="recordInfo.remark" style="width: 70%;"></Input>
                <Button @click="addRecord()" type="info" style="margin-left: 5px;">添加</Button>
                <br>
                <br>
                <Table :columns="columns1" :data="list1" border stripe size="small">
                    <template slot-scope="{ row , index}" slot="userSlot">
                        <div v-if="row.type == 1">{{ row.user_name }}</div>
                        <div v-if="row.type == 2 || row.type == 3">{{ row.coach_name }}</div>
                        <div v-if="row.type == 4 || row.type == 5">{{ row.admin_name }}</div>
                    </template>
                    <template slot-scope="{ row , index}" slot="coachSlot">
                        <div v-if="row.type == 1">用户取消</div>
                        <div v-if="row.type == 2">教练拒接</div>
                        <div v-if="row.type == 3">教练放置大厅</div>
                        <div v-if="row.type == 4">后台取消</div>
                        <div v-if="row.type == 5">后台放置大厅</div>
                    </template>
                </Table>
                <Paginate :total="total1" @on-change="changePage1" @on-page-size-change="changeSize1"
                    :current="searchData1.page">
                </Paginate>
            </Modal>
        </div>
    </div>
</template>

<script>
import Paginate from "_c/paginate";
import searchsite from '@/components/qqmap/searchsite'
import MyUpload from "_c/my-upload"
import ShowImg from '_c/show_img'
import clipboard from 'clipboard';
export default {
    name: "studyCardOrderList",
    components: {
        Paginate, MyUpload
    },
    data() {
        return {
            // 列表
            columns: [
                {
                    title: '订单编号',
                    align: "center",
                    key: 'order_sn',
                },
                {
                    title: '学员信息',
                    align: "left",
                    slot: 'userSlot',
                },
                {
                    title: '教练',
                    align: "left",
                    slot: 'coachSlot',
                },
                {
                    title: '课程',
                    align: "left",
                    slot: 'courseSlot',
                },
                {
                    title: '价格',
                    align: "center",
                    key: 'amount',
                },
                {
                    title: '教练工资',
                    align: "center",
                    key: 'coach_amount',
                },
                {
                    title: '状态',
                    align: "center",
                    key: 'status_txt',
                },
                {
                    title: '备注',
                    align: "center",
                    key: 'remark',
                },
                {
                    title: '创建时间',
                    align: "center",
                    key: 'create_time',
                },
                {
                    title: '操作',
                    align: "center",
                    key: 'make',
                    slot: 'memberSlot',
                },
            ],
            // 数据
            list: [],
            total: 0,
            searchData: {
                page: 1,
                limit: 10,
            },
            // 添加订单
            showAdd: false,
            // 指派教练
            showAssign: false,
            orderInfo: {},
            coachList: [],
            // 取消订单
            cancelOrderModal: false,
            cancelOrder: {
                id: 0,
                reason: "",
            },
            schoolList: [],
            cityArr: [],
            sourceArr: [],
            showCodeModal: false,
            couponInfo: {},
            infoModal: false,
            columns1: [
                {
                    title: '跟踪时间',
                    align: "center",
                    key: 'create_time',
                },
                {
                    title: '备注',
                    align: "center",
                    key: 'remark',
                },
            ],
            // 数据

            list1: [],
            total1: 0,
            searchData1: {
                page: 1,
                limit: 10,
                id: 0,
            },
            recordInfo: {
                orderId: 0,
            },
            completeOrderModal: false,
            completeOrder: {},
        }
    },
    methods: {
        getImg(items) {
            items.forEach(item => {
                this.couponInfo.coupon_code_img = item.url;
            });
        },
        rowClassName(row, index) {
            // 获取目标时间和当前时间
            const targetDate = new Date(row.create_time);
            const now = new Date();

            // 计算时间差（毫秒）
            const diffMs = targetDate - now;

            // 转换为分钟并四舍五入
            const diffMinutes = Math.round(diffMs / (1000 * 60));
            if (row.status === 1 && diffMinutes > 15) {
                return 'demo-table-error-row';
            }
            return '';
        },
        getList() {
            this.$axios('/admin/school/order/getList', this.searchData).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        search() {
            this.searchData.page = 1;
            this.getList();
        },
        reset() {
            this.searchData = {
                page: 1,
                limit: 10,
            };
            this.getList();
        },
        changePage(page) {
            this.searchData.page = page;
            this.getList();
        },
        changePage1(page) {
            this.searchData1.page = page;
            this.getRecordList();
        },
        changeSize(size) {
            this.searchData.limit = size;
            this.getList();
        },
        changeSize1(size) {
            this.searchData1.limit = size;
            this.getRecordList();
        },
        customSort(column, key, order) {
            this.searchData.order_by = column.key;
            this.searchData.sort = column.order;
            this.getList();
        },
        add(row) {
            if (row) {
                this.orderInfo = { ...row };
            } else {
                this.orderInfo = {
                    id: 0,
                    source_id: this.sourceArr.length == 0 ? 0 : this.sourceArr[0]['id'],
                };
            }
            this.showAdd = true;
        },
        showDetail(id) {
            this.orderInfo.id = id;
            this.showAssign = true;
        },
        submit() {
            this.$axios('/admin/goods/setCoach', this.orderInfo).then(res => {
                this.$Message.success('执行成功');
                this.getList();
            });
        },
        timeStampToDate(timestamp) {
            let date = new Date(timestamp * 1000);

            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let hour = date.getHours(); // 获取小时
            let minute = date.getMinutes(); // 获取分钟
            let second = date.getSeconds(); // 获取秒

            return `${year}-${month}-${day} ${hour}:${minute}`;
        },
        cancel(id) {
            this.cancelOrderModal = true;
            this.cancelOrder.id = id;
            this.cancelOrder.reason = '';
            this.cancelOrderModal = true;
        },
        cancelOrderSubmit() {
            this.$axios('/admin/goods/cancel').then(res => {
                this.$Message.success('执行成功');
                this.cancelOrderModal = false;
                this.getList();
            });
        },
        getCoachList() {
            this.$axios('/admin/coach/getArr').then(res => {
                this.coachList = res;
            });
        },
        getSchoolList(city_id) {
            this.$axios('/admin/school/school/getArr', { city_id: city_id }).then(res => {
                this.schoolList = res;
            });
        },
        // 开通城市
        openCityArr() {
            this.$axios('/admin/school/base/getArr').then(res => {
                this.cityArr = res;
            });
        },
        cityChange(city_id) {
            this.orderInfo.school_id = 0;
            this.getSchoolList(city_id);
        },
        addSubmit() {
            this.$axios('/admin/school/order/save', this.orderInfo).then(res => {
                this.$Message.success('执行成功');
                this.showAdd = false;
                this.getList();
            });
        },
        // 订单来源
        orderSourceArr() {
            this.$axios('/admin/config/order_source/getArr').then(res => {
                this.sourceArr = res;
            });
        },
        uploadCode(id) {
            this.couponInfo = { id: id };
            this.showCodeModal = true;
        },
        uploadCodeOk() {
            this.$axios('/admin/school/order/uploadCouponCode', this.couponInfo).then(res => {
                this.$Message.success('执行成功');
                this.getList();
            });
        },
        complete(row) {
            this.completeOrder.id = row.id;
            this.completeOrder.amount = row.coach_amount;
            this.completeOrderModal = true;
        },
        completeOrderSubmit() {
            this.$axios('/admin/school/order/complete', this.completeOrder).then(res => {
                this.$Message.success('执行成功');
                this.getList();
            });
        },
        record(id) {
            this.recordInfo = {
                id: id,
            };
            this.searchData1.id = id;
            this.getRecordList();
            this.infoModal = true;
        },
        getRecordList() {
            this.$axios('/admin/school/order/getRecordList', this.searchData1).then(res => {
                this.list1 = res.data;
                this.total1 = res.total;
            });
        },
        addRecord() {
            this.$axios('/admin/school/order/addRecord', this.recordInfo).then(res => {
                this.$Message.success('执行成功');
                this.getRecordList();
            });
        },
        del(id) {
            this.$Modal.confirm({
                title: '删除',
                content: "<p>您确定要删除吗？</p>",
                onOk: () => {
                    this.$axios('/admin/school/order/del', { id: id }).then(res => {
                        this.$Message.success('删除成功');
                        this.getList();
                    });
                },
                onCancel: () => {
                    this.$Message.info('取消操作');
                }
            });
        },
    },
    created() {
        // 查询自己管理员
        this.getList();
        this.getCoachList();
        this.getSchoolList(0);
        this.openCityArr();
        this.orderSourceArr();
    },

}
</script>